新增 Header 元件

在 src/components 內新增一個 Header.vue 用來放 header 的程式碼

<template>
  <header class="header">
    <h1 class="logo">
      推甄分享網站
    </h1>

    <button class="add-btn">
      ＋ 新增文章
    </button>
  </header>
</template>

樣式這次用的是純 CSS，全部放在 style.css 中方便管理

body{
  margin: 0;
}

#app {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

*, *::before, *::after {
  box-sizing: border-box;
}


.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2c3e50;
    padding: 1rem 2rem;
    color: #fff;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.add-btn {
    background: #42b983;
    border: none;
    color: white;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.add-btn:hover {
    background: #36a374;
}

最後記得在 App.vue 的地方 import header 並加入

<script setup>
import Header from './components/Header.vue'
</script>

<template>
  <Header />
  <main>
    <h2>歡迎來到推甄分享網站</h2>
    <p>這裡是主要內容區域。</p>
  </main>
</template>

目前成果

有點醜XDD 之後再來美編好看一點

小結

• 新增了一個 Header 元件
• 左邊放網站名稱，右邊放新增按鈕
• 在 App.vue 引入並使用